<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="table-container">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form-model layout="inline" @keyup.enter.native="searchQuery">
              <a-row>
                <a-col :span="5">
                  <a-form-model-item>
                    <a-input
                      v-model="queryParam.searchValue"
                      placeholder="请输入细胞号或客户名称"
                    >
                      <a-icon slot="prefix" class="font-placeholder" type="search"/>
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="6" :offset="1" class="table-page-search-submitButtons">
                  <a-button @click="searchQuery" type="primary">查询</a-button>
                  <a-button @click="searchReset" type="danger">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <a-button @click="handleAdd" type="primary" v-has="['insertFreeze']">新增暂存记录</a-button>
            <a-button @click="exportExcel" :loading="exportLoading" v-has="['exportFreeze']">导出暂存记录</a-button>
          </div>

          <!-- 表格区域 -->
          <a-row>
            <a-col :span="24">
              <ry-table
                :columns="columns"
                :loading="loading"
                :data-source="dataSource"
                :rowKey="record => record.id"
                :pagination="ipagination"
                bordered
                :scroll="{ x: 'max-content' }"
              >
                <!-- 客户名称 -->
                <template slot="nickname" slot-scope="{ text, record }">
                  <span>{{ text || (record.businessAccount && record.businessAccount.nickname) || '--' }}</span>
                </template>

                <!-- 项目名称（字典映射 Tag） -->
                <template slot="applyProject" slot-scope="{ text, record }">
                  <span>
                    <a-tag color="blue">
                      {{ $getDictName('APPLY_PROJECT', record.applyProject) }}
                    </a-tag>
                  </span>
                </template>
                <template slot="status" slot-scope="{text}">
                  <span>{{ $getDictName('cell_status', text) || '--' }}</span>
                </template>
                <!-- 操作 -->
                <template slot="action" slot-scope="{ record }">
                  <a-space size="middle">
                    <a-button v-has="['editFreeze']" type="primary" @click="handleEdit(record)"
                              :disabled="record.status !== '3' || record.cellNum === 0">编辑
                    </a-button>
                    <a-button v-has="['freezeOut']" type="danger" @click="handleOut(record)"
                              v-if="record.status === '3'">出库
                    </a-button>
                    <a-button v-has="['freezeDel']" type="default" @click="handleDelete(record.id)"
                              v-if="record.status === '3' && record.outbounds.length === 0">删除
                    </a-button>
                  </a-space>
                </template>
              </ry-table>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <!-- 弹窗组件 -->
    <FreezeRecordModal ref="modalForm" @ModalOk="modalFormOk"/>
    <OutModel
      ref="outModal"
      @ModalOk="modalFormOk"
      :status="1"/>
  </div>
</template>

<script>
import {RyListMixin} from '@/ryweb'
import FreezeRecordModal from './modules/FreezeRecordModal.vue'
import OutModel from "./modules/OutModel.vue";
import {freezeRecord} from '@/apilist/permission'
import {exportExcel} from '@/utils/export.js'

export default {
  name: 'FreezeRecord',
  mixins: [RyListMixin, exportExcel],
  components: {FreezeRecordModal, OutModel},
  data() {
    return {
      reloadDict: true,
      exportLoading: false,
      // 表格列定义（加入细胞相关字段）
      columns: [
        {title: '客户名称', align: 'center', dataIndex: 'nickname', scopedSlots: {customRender: 'nickname'}},
        {title: '客户编码', align: 'center', dataIndex: 'serialNumber'},
        {title: '项目名称', align: 'center', dataIndex: 'applyProject', scopedSlots: {customRender: 'applyProject'}},
        {title: '细胞编号', align: 'center', dataIndex: 'cellCode'},
        {title: '细胞管数(原)', align: 'center', dataIndex: 'originalCellNum'},
        {title: '细胞管数(余)', align: 'center', dataIndex: 'cellNum'},
        {title: '细胞数量', align: 'center', dataIndex: 'quantity'},
        {title: '暂存时间', align: 'center', dataIndex: 'freezeTime'},
        {title: '处理实验室', align: 'center', dataIndex: 'processLab'},
        {title: '创建人', align: 'center', dataIndex: 'createBy'},
        {title: '创建时间', align: 'center', dataIndex: 'createTime'},
        {title: '状态', align: 'center', fixed: 'right', dataIndex: 'status', scopedSlots: {customRender: 'status'}},
        {title: '操作', align: 'center', fixed: 'right', scopedSlots: {customRender: 'action'}}
      ],
      url: {
        list: freezeRecord.list,
        add: freezeRecord.insert,
        edit: freezeRecord.update,
        delete: freezeRecord.delete,
        exportFile: freezeRecord.exportFile
      },
      outUrl: {
        list: this.$api.permission.cellList.outList,      // 查询出库记录
        insert: this.$api.permission.cellList.outInsert,  // 新增出库
      },
      selectedRowKeys: [],
      queryParam: {
        searchValue: ''
      },
      loading: false
    }
  },

  methods: {
    /* 拆分逗号分隔字符串 */
    splitCodes(val) {
      if (!val) return []
      return String(val).split(',').map(s => s.trim()).filter(Boolean)
    },

    async exportExcel() {
      this.exportLoading = true
      await this.exportXlsNotDate(this.url.exportFile, this.queryParam, '冻存记录导出文件', false)
      this.exportLoading = false
    },

    /** 查询 */
    searchQuery() {
      this.loadData(1)
    },

    /** 重置 */
    searchReset() {
      this.queryParam.searchValue = ''
      this.loadData(1)
    },

    /** 新增 */
    handleAdd() {
      this.$refs.modalForm.open() // 新增
    },

    /** 编辑 */
    handleEdit(record) {
      this.$refs.modalForm.open(record) // 编辑
    },

    handleOut(record) {
      this.$refs.outModal.open(record);  // 打开出库弹框
    },

  }
}
</script>

<style lang="less" scoped>
.table-page-search-wrapper {
  margin-left: 0;
}

.table-page-search-submitButtons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
}

.table-operator {
  margin-bottom: 16px;
}
</style>
